import React, { useEffect, useRef, useState, useMemo } from 'react'
import CommonList from '../../components/CommonList'
import { useApi } from '../../api'
import { storage } from '../../utils'
import { message } from 'antd'

const MyList = React.memo(CommonList)

const { getItem } = storage

//表头数据
const tableHead = ['序号', '标题', '背景图', '发布时间', '类型', '状态']

function ArticleList() {
  const { getUserArticle, changeArticleStatus, getPublishArticle } = useApi()

  const jurisdiction = useRef(getItem('jurisdiction'))

  //保存请求数据的方法，分为管理员和普通用户adminUser,commonUser
  let done = useRef()

  //新闻数据
  const [list, setList] = useState([])

  //重新请求数据
  const getData = async () => {
    try {
      let res = await done.current()
      setList(res)
    } catch (error) {
      message.error('异常')
      console.log('err', error)
    }
  }

  useEffect(() => {
    ;(async () => {
      try {
        if (jurisdiction.current == 'adminUser') {
          done.current = getPublishArticle
          let res = await getPublishArticle()
          setList(res)
          console.log('eee', res)
        } else {
          done.current = getUserArticle
          let res = await getUserArticle()
          setList(res)
          console.log('eee', res)
        }
      } catch (error) {
        message.error('异常')
        console.log('err', error)
      }
    })()
  }, [])

  return (
    <>
      <MyList list={list} changeArticleStatus={changeArticleStatus} getData={getData}>
        <ul className="flex justify-around bg-[#fafafa]">
          {tableHead.map(item => {
            return (
              <li
                key={item}
                className="text-[.175rem]  w-[100%] h-[.85rem] flex justify-center items-center font-bold border-r-[.025rem] border-solid border-[#edf2fa]"
              >
                {item}
              </li>
            )
          })}
        </ul>
      </MyList>
    </>
  )
}

export default ArticleList
